<template>
  <view>
    <view class="uni-header">
      <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
      <view class="uni-group">
        <button @click="navigator('/pages/unify/user/form',{title:$t('common.button.add') + '管理员'})"
          class="uni-button" type="primary" size="mini">{{$t('common.button.add')}}管理员</button>
        <button class="uni-button" type="default" size="mini"
          @click="clickUpdateStatus(getSelectIds(), 1)">批量启用</button>
        <button class="uni-button" type="default" size="mini"
          @click="clickUpdateStatus(getSelectIds(), 0)">批量禁用</button>
        <button class="uni-button" type="warn" size="mini"
          @click="clickDelete(getSelectIds())">{{$t('common.button.batchDelete')}}</button>
      </view>
      <view class="uni-group">
        <input class="uni-search" type="text" v-model="condition.keywords" @confirm="search"
          :placeholder="$t('common.placeholder.query')" />
        <button class="uni-button" type="primary" size="mini" @click="search">{{$t('common.button.search')}}</button>
        <button class="uni-button" type="default" size="mini"
          @click="reset">{{$t('common.button.reset')}}{{$t('common.button.search')}}</button>
      </view>
    </view>

    <view class="uni-container">
      
      <uni-table ref="table" :loading="loading" emptyText="没有更多数据" border stripe type="selection"
        @selection-change="selectionChange">
        <uni-tr>
          <uni-th align="center" width="200" filter-type="search" @filter-change="filterChange($event, 'username')">用户名</uni-th>
          <uni-th align="center" width="120" filter-type="search" @filter-change="filterChange($event, 'nick')">昵称</uni-th>
          <uni-th align="center" width="120" filter-type="select" :filter-data="filterRoleList" @filter-change="filterChange($event, 'roleIds')">角色</uni-th>
          <uni-th align="center" width="120" filter-type="select" :filter-data="filterStatusList" @filter-change="filterChange($event, 'status')">状态</uni-th>
          <uni-th align="center" width="120">最后登录</uni-th>
          <uni-th align="center" width="120">登录IP</uni-th>
          <uni-th align="center" width="200">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item,index) in items" :key="index">
          <uni-td align="center">{{item.username}}</uni-td>
          <uni-td align="center">{{item.nick}}</uni-td>
          <uni-td align="center">{{item.roleNames}}</uni-td>
          <uni-td align="center">
            <switch style="zoom: 0.8;" :checked="item.status == 1"
              @change="tableUpdateField({value:$event.detail.value, id:item.id, field:'status' })" />
          </uni-td>
          <uni-td align="center">{{item.gmtLogined}}</uni-td>
          
          <uni-td align="center">{{item.loginedIp}}</uni-td>
          
          <uni-td align="center">
           <view class="uni-group">
             <button @click="clickForm(item.id, item.nick)" class="uni-button" size="mini"
               type="primary">{{$t('common.button.edit')}}</button>
             <button @click="clickDelete([item.id])" class="uni-button" size="mini"
               type="warn">{{$t('common.button.delete')}}</button>
           </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <uni-pagination show-icon show-page-size :page-size="pageSize" v-model="pageCurrent" :current="pageCurrent" :total="total"
        @change="changePage" @pageSizeChange="changeSize" />
    </view>
  </view>
  <fix-window />

</template>


<script>
  import {
    mapActions
  } from "vuex"
  export default {
    data() {
      return {
        pageSize: 20,
        pageCurrent: 1,
        total: 0,
        items: [],
        loading: true,
        selectIds: [],
        condition: {
          keywords: "",
        },
        conditionData: {
          statusList: [],
          roleList: []
        }
      }
    },
    computed: {
      filterStatusList() {
		  return this._conditionalParameterAdapter(this.conditionData.status);
      
      },
      filterRoleList() {
		  return this._conditionalParameterAdapter(this.conditionData.roleIds);
		  
      },
    },
    onLoad() {
      this.form().then(data => {
        this.conditionData = data
      })
    },
    onShow() {
      this.search()
    },
    methods: {
      ...mapActions('user', ['form', 'list', 'delete', 'updateField']),
      // 搜索
      search() {
       this.selectIds = [];
       if (this.$refs.table) {
         this.$refs.table.clearSelection();
       }
       
       
       this.loading = true
       this.items = [];
       let conditionCopy = JSON.parse(JSON.stringify(this.condition))
       conditionCopy.page = this.pageCurrent;
       conditionCopy.limit = this.pageSize;
       this.list(conditionCopy).then(data => {
         this.items = data.list
         this.total = data.count
         this.loading = false
       });
      },
      reset() {
        this.condition.keywords = "";
        this.search();
      },
      clickForm(id, title, read = false) {
        uni.navigateTo({
          url: `/pages/unify/user/form?id=${id}&title=${title}&read=${read}`,
        })
      },
      clickUpdateStatus(ids, value = 1) {
        let action = this.conditionData.statusList[value];        
        uni.showModal({
          title: `确认批量${action}吗？`,
          success: (e2) => {
            if (e2.cancel) return
            this.updateField({
              ids: ids,
              field: "status",
              value: value
            }).then(_ => {
              uni.showToast({
                title: `${action}成功`
              })
              this.search();
            })
          }
        })
      },
      clickDelete(ids) {
        uni.showModal({
          title: "确认删除用户，删除后该将无法再登录。",
          success: e2 => {
            if (e2.cancel) return
            this.delete({
              ids
            }).then(_ => {
              uni.showToast({
                title: "操作成功"
              })
              this.search();
            })
          }
        })
      },
      tableUpdateField(e) {
        this.updateField({
          ids: [e.id],
          field: e.field,
          value: e.value
        }).then(_ => {
          this.search();
        })
      },
      changeSize(e) {
        this.pageSize = e;
        this.pageCurrent = 1;
        this.search()
      },
      changePage(e) {
        this.pageCurrent = e.current;
        this.search()
      },
      getSelectIds() {
        if (!this.selectIds.length) {
          uni.showToast({
            title: "请指定操作的记录",
            icon: "none"
          })
          throw new Error("请指定操作的记录");
        }
        return this.selectIds
      },
      selectionChange(e) {
        this.selectIds = []
        e.detail.index.forEach(index => {
          this.selectIds.push(this.items[index].id)
        })
      },
      filterChange(e, field) {
        switch (e.filterType) {
          case "search":
            this.condition[field] = e.filter
            break
          case "select":
            this.condition[field] = e.filter
            break
          case "range":
            this.condition[field] = e.filter
            break;
          case "date":
          case "timestamp":
            if (e.filter[0]) {
              e.filter[0] /= 1000
            }
            if (e.filter[1]) {
              e.filter[1] /= 1000
            }
            this.condition[field] = e.filter
            break;
        }
      
        this.search()
      },
    }
  }
</script>